<template>
	<view>
		<TopNav title="选择银行"></TopNav>
		<view class="m-t4 p-lr12 search">
			<u-search :showAction="true" v-model="queryParams.title" @search="handleSearch" @custom="handleSearch" @clear="handleSearch" placeholder="请输入银行名称" placeholderColor="#B2B8C1" actionText="搜索"
				bgColor="#F0F1F2" :animation="true" searchIcon="/static/images/mine/search.png"
				style="font-size: 30rpx;"></u-search>
		</view>
		<view class="main m-t8">
			<view class="p-tb12" v-for="item in list" :key="item.id" @click="handleSelectSchool(item)">
				<text class="f-s15 f-w400 line-height20">{{item.title}}</text>
			</view>
			<view class="padding-tb-xs" v-if="total !== 0">
				<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
			</view>
			<Empty :show="total === 0"></Empty>
		</view>
	</view>
</template>

<script>
	import {
		bankList
	} from "@/api/mine/pay.js"
	import mixins from "@/mixins";
	import Empty from '@/components/empty/index.vue'
	export default {
		mixins: [mixins],
		components: {
			Empty
		},
		data() {
			return {
				list: [],
				queryParams: {
					title:'',
					page: 1,
					limit: 10
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			handleSearch(){
				this.queryParams.page = 1
				this.getList()
			},
			handleSelectSchool(select){
				uni.$emit('bankSelect',select)
				this.$tab.navigateBack()
			},
			getList() {
				bankList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	@import "@/common/css/var.scss";

	.search {
		width: 100%;
		position: sticky;
		@include sticky-top;
		background-color: #fff;
	}

	.main {
		padding: 0 50rpx;
	}
</style>